// ======================= 定义查询参数 =======================
const query = {
  pagenum: 1, // 是	int	页码值
  pagesize: 2, // 是	int	每页显示多少条数据
  cate_id: "", // "" 所有的文章分类 否	string	文章分类的 Id
  state: "", // "" 所有状态 文章状态  可选值有：已发布、草稿
};

//============获取文章列表数据==============
getArtList()
function getArtList() {
  axios.get('/my/article/list', { params: query }).then(({ data: { data, total } }) => {
    let newArr = data.map(({ title, cate_name, pub_date, state, Id }) =>
      `
     <tr>
            <td>${title}</td>
            <td>${cate_name}</td>
            <td>${pub_date}</td>
            <td>${state}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id="${Id}">删除</button>
            </td>
          </tr>`
    )
    $('#list').html(newArr)
    //处理分页
    renderPage(total)
  })
}


// axios.get('/my/article/list', { params: query }).then(({ data: { data } }) => {
//   let newArr = data.map(({ title, cate_name, pub_date, state, Id }) =>
//     `
//      <tr>
//             <td>${title}</td>
//             <td>${cate_name}</td>
//             <td>${pub_date}</td>
//             <td>${state}</td>
//             <td>
//               <button type="button" class="layui-btn layui-btn-xs btn_edit">编辑</button>
//               <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete">删除</button>
//             </td>
//           </tr>`
//   )
//   $('#list').html(newArr)
// })

let form = layui.form;
let layer = layui.layer;

//获取分类列表数据 ==> 填充到分类的下拉框中
axios.get('/my/article/cates').then((res) => {
  console.log(res);
  // 还需要把option的value设置好值value设置成对应的Id的值
  let newArr = res.data.data.map((item) => {
    return `<option value="${item.Id}">${item.name}</option>`
  }).join('')
  //把option内容放到下拉框中 html 方法可以使用，但是在这使用的话，会把原本的内容给覆盖掉，可以使用append方法进行添加(不会有覆盖问题)
  $('#cateSelect').append(newArr)
  // 使用html方法，而且还不覆盖
  //$('#cateSelect').html(' < option value = "" > 所有分类</ > ' + newArr.join(''))
  // 当option创建添加到下拉框之后，手动更新form表单全部内容
  form.render();
})

//==================实现筛选功能=============
//步骤
//1.给筛选的表单注册submit事件
//2.阻止默认行为
//3.需要获取到下拉框的值 ==> jQ的val() 方法
// 4封装函数，以便复用
//5.在发送请求前，记得修改query对象的 cate_id(分类的id) + state(状态)
// 6.调用函数，发送ajax请求
$('#form').on('submit', function (e) {
  e.preventDefault()
  query.cate_id = $('#cateSelect').val()
  query.state = $('#stateSelect').val()
  //修改query的pagenum的值,筛选时每次都从第一页开始
  query.pagenum = 1
  getArtList()

})

//============分页功能=============
//分页函数==》调用位置有讲究（需要在获取到列表数据的时候调用）

const laypage = layui.laypage;
function renderPage(count) {
  laypage.render({
    elem: 'page-box',//注意，这里的page-box是ID，不用加#
    count, //数据总数，从服务端得到
    limit: query.pagesize,//每页显示的条数
    curr: query.pagenum,//起始值
    limits: [1, 2, 3, 4, 5, 6],//每页条数的选择项
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
    jump: function (obj, first) {
      //注意有bug
      //jump回调函数触发的时机有2种情况
      //1.laypage.render调用的时候，jump会触发,形参first是true
      //2.分页切换会触发jump回调函数
      //console.log(first);
      //obj包含了当前分页的所有参数，比如：
      // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      // console.log(obj.limit); //得到每页显示的条数
      //修改query的pagenum的值
      query.pagenum = obj.curr
      //修改query的pagesize的值==>obj.limit
      query.pagesize = obj.limit
      //首次不执行
      if (!first) {
        //点击分页的时候做啥
        //if成立，说明first的值是undefined，
        getArtList()
      }
    }
  })
}

//===============删除功能==================
$('#list').on('click', '.btn_delete', function () {
  let Id = $(this).attr('data-id')
  layer.confirm('确认删除此文章吗？'), { icon: 3, title: '提示' }, function (index) {
    axios.get('/my/article/delete/' + Id).then(({data:{status,message}}) => {
      if (status !== 0) {
        return layer.msg(message)
      }
      //解决删除的bug ==> 去加载上一页的数据
      //当这一页的删除按钮的个数为一个的时候，表示这一条数据删除之后，这一页将没有了数据，就需要展示上一页 
      // 页码最小值1
      if ($('#btn_delete').length === 1) {
        query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1
      }

      layer.msg(message)
      layer.close(index)
      getArtList()
    })
  }


})
//================编辑功能======================
$('#list').on('click', '.btn_edit', function () {
  let id=$(this).attr('data-id')
 //跳转页面
  location.href = '/article/art_edit.html?id='+id
 })